---
description:
  Nextra is a framework built on top of Next.js that enables the creation of
  content-focused websites. It combines the robust features of Next.js with
  enhanced capabilities for crafting Markdown-based content.
---

import { Cards, Image } from 'nextra/components'
import { cloneElement } from 'react'

export default function MdxLayout(props) {
  return cloneElement(props.children, {
    components: {
      img: Image
    }
  })
}

# Introduction

**Nextra** is a framework on top of Next.js, that lets you build content focused
websites. It has all the great features from Next.js, plus extra power to create
Markdown-based content with ease.

## Quick start

To start using Nextra, you need to select a theme first:

<Cards num={2}>
  <Cards.Card arrow title="Documentation theme" href="/docs/docs-theme/start">
    <>![Documentation theme screenshot](/assets/docs-theme.png)</>
  </Cards.Card>
  <Cards.Card arrow title="Blog theme" href="/docs/blog-theme/start">
    <>![Blog theme screenshot](/assets/blog-theme.png)</>
  </Cards.Card>
</Cards>

If you want to use Nextra without using these built-in themes, you can follow
the [Custom Theme](/docs/custom-theme) docs.

## FAQ

The Nextra FAQ is a collection of useful questions and answers about the
project. If you have a question that isn't answered here, please
[open a discussion](https://github.com/shuding/nextra/discussions).

<details>
  {/* prettier-ignore */}
  <summary>Can I use Nextra with Next.js `pages` router?</summary>
Nextra 4 only works with the `app` router. Only Nextra 1/2/3 supports the
`pages` router.

</details>

<details>
  <summary>Can I use X with Nextra?</summary>
The answer is "yes" for most things. Since Nextra is just a Next.js plugin, almost all the things
that can be done with React can be done with Nextra. Here are some examples and guides:

- [Use Tailwind CSS](/docs/guide/tailwind-css)
- [Use custom CSS and Sass](/docs/guide/custom-css)
- [Use custom fonts](https://nextjs.org/docs/basic-features/font-optimization)

</details>

<details>
  {/* prettier-ignore */}
  <summary>How can I add a live coding component in Nextra?</summary>
There are libraries like [Sandpack](https://sandpack.codesandbox.io) and
[react-live](https://github.com/FormidableLabs/react-live) that can help you
add live coding components to your MDX.

</details>
